<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			a{
				color:black;
				text-decoration: none;
			}
			#banner{
				position: relative;
			}
			#banner #nav{
				position: absolute;
				bottom: 20px;
				/* width: 120px; */
			/* 	border: 1px solid red; */
				left: calc(50% - 50px);
				text-align: center;
				
			}
			#banner #nav #navibar{
				display: flex;
			/* 	margin: 0 auto; */
				width: 140px;
				height: 20px;
				z-index: 100;
				/* line-height: 25px; */
				/* padding-top: 5px; */
				/* line-height: 20px; */
				background-color: lightgray;
				justify-content: space-evenly;
				border-radius: 15px;
			}
			#banner #nav li{
				margin-top: 3px;
				list-style: none;
				height: 15px;
				width: 15px;
				/* line-height: 15px; */
				font-size: 10px;
				border-radius: 50%;
				background-color: darkgrey;
				/* margin-left: 5px; */
				
			} 
			#banner #nav li a{
				height: 15px;
				width: 15px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div id="banner">
			<img src="../images/banner2.jpg" height="300" width="100%"/>
			<div id="nav">
				<ul id="navibar">
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>